import React, { Component } from 'react';
import { NavBar, Icon  } from 'antd-mobile';
import Footer from './../../components/footer'
import { NavLink } from 'react-router-dom';
import style from './index.module.scss';
import axios from 'axios'

class Com extends Component {
  state={
    value: '',
    topics: {},
    author: {},
    others: [],
    topiclist: [],
    travelslist: []
  }
  componentDidMount(){
    axios.get('http://rap2.taobao.org:38080/app/mock/244731/api/community').then(res=>{
      console.log(res)
      this.setState({
        topics: res.data.data,
        topiclist: res.data.data.topics,
        author: res.data.author,
        travelslist: res.data.author.travels,
        others: res.data.others
      })
    })
  }
  render() {
    return (
      <div className='box'> 
        {/* 头部 */}
        <header className='header' style={{marginBottom: '0.1rem'}}>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-lingdang" key='0' style={{ fontSize: '0.23rem', color:'#ccc' }}></span>}
            rightContent={[
              <Icon key="0" type="ellipsis" color='#ccc' style={{ marginRight: '0.13rem' }} />
            ]}
            >
          </NavBar>
        </header>
        <div className="content">
          {/* 搜索与tab栏 */}
          <div style={{
            display: 'flex',
            width: '100%',
            alignItems: 'center',
            flexDirection: 'column'
          }}>
            {/* 搜索 */}
            <NavLink to='/search'>
              <input type="text" placeholder='搜索' disabled style={{
                width: '3.45rem',
                height: '0.24rem',
                borderRadius: '0.12rem',
                outline: 'none',
                border: '1px solid #ccc',
                paddingLeft: '35px',
                background:'url("/images/sousuo.png") no-repeat 15px center',
                backgroundSize: '0.15rem',
                marginBottom: '0.16rem'
                }}/>
            </NavLink>
            {/* 图片与tab栏 */}
            <img style={{
              width: '3.34rem',
              height: '1.325rem',
              border: '1px'
            }} src={this.state.topics.bigimg} alt=""/>
            <ul className={style.nav}>
              <NavLink to="/home">
                <img src="/images/question.png" alt=""/>
                <p>穷游问答</p>
              </NavLink>
              <NavLink to="/home">
                <img src="/images/Travel.png" alt=""/>  
                <p>结伴旅行</p>
              </NavLink>
              <NavLink to="/home">
                <img src="/images/visa.png" alt=""/>
                <p>签证专版</p>
              </NavLink>
              <NavLink to="/home">
                <img src="/images/Essence.png" alt=""/>
                <p>最新精华</p>
              </NavLink>
            </ul>
          </div>
          {/* 作者的话题 */}
          <ul className={style.topicdocs}>
            {
              this.state.topiclist.map(item => {
                return <li key={item.topicid} onClick={
                  ()=>{
                    this.props.history.push({pathname: '/topic', state:{topicid: item.topicid}})
                    sessionStorage.setItem('topicid', item.topicid)
                  }
                }>
                  <div className={style.things}>
                    <p>话题</p>
                    <p style={{color:'rgba(51,51,51,1)'}}>{item.title}</p>
                    <p>{item.desc}</p>
                  </div>
                  <img src={item.topicimg} alt=""/>
                </li>
              })
            }
          </ul>
          {/* 探路者 */}
          <p style={{
            fontSize:'0.18rem',
            fontFamily:'PingFang SC',
            fontWeight:'bold',
            color:'rgba(51,51,51,1)',
            padding: '0.27rem 0 0 0.3rem'
          }}>探路者</p>
          <p style={{
            fontSize:'0.15rem',
            fontFamily:'PingFang SC',
            fontWeight:'300',
            color:'rgba(6,102,102,1)',
            padding: '0 0 0.05rem 0.3rem'
          }}>Patnerder</p>
          {/* 作者文章区域 */}
          <div style={{
            paddingLeft: '0.3rem',
            paddingRight: '0.15rem',
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: '0.37rem'
          }}>
            <img src={this.state.author.avatar} style={{
              width: '0.35rem',
              height: '0.35rem',
              borderRadius: '50%',
              marginRight: '0.17rem'
            }} alt=""/>
            <div style={{
                width: '100%'
                }}>
              <p style={{
                width: '100%',
                height: '0.27rem',
                display: 'flex',
                color: '#333333',
                fontWeight: 'bold',
                lineHeight: '0.35rem',
                fontFamily:'PingFang SC',
                justifyContent: 'space-between',
                marginBottom: '0.15rem'
              }}>{this.state.author.username}<span style={{
                display: 'block',
                width: '0.57rem',
                height: '0.27rem',
                border: '1px solid #05C572',
                boxSizing: 'border-box',
                textAlign: 'center',
                lineHeight: '0.27rem',
                color: '#05C572'
              }}>关注</span></p>
              <p style={{
                fontSize:'0.15rem',
                fontFamily:'PingFang SC',
                fontWeight:'300',
                color:'rgba(51,51,51,1)'
              }}>{this.state.author.artical}</p>
            </div>
          </div>
          {/* 它的游记 */}
          <p style={{
            padding: '0 0 0.12rem 0.29rem',
            fontSize:'0.15rem',
            fontFamily:'PingFang SC',
            fontWeight:'bold',
            color:'rgba(51,51,51,1)',
          }}>他的游记</p>
          {/* 游击展示 */}
          <div style={{
                width: '3.34rem',
                height: '1.325rem',
                marginLeft: '0.2rem',
                marginBottom: '0.2rem',
                position: "relative"
                }}>
            <img style={{
                width: '3.34rem',
                height: '1.325rem'
              }} src={this.state.topics.bigimg} alt=""/>
              <span style={{
                position: 'absolute',
                display: 'block',
                width: '0.5rem',
                height: '0.15rem',
                backgroundColor: '#05C572',
                color: '#fff',
                textAlign: 'center',
                lineHeight: '0.15rem',
                fontSize: '0.06rem',
                zIndex: 1,
                left: '0.1rem',
                top: '0.1rem'
              }}>首页推荐</span>
              <p style={{
                position: 'absolute',
                fontSize:'0.15rem',
                fontFamily:'PingFang SC',
                fontWeight:'bold',
                color:'rgba(254,254,254,1)',
                left: '0.05rem',
                bottom: '0.13rem'
              }}>你好啊！成都理工，千锋</p>
          </div>
          {/* 游记滑动区域 */}
          <ul className={style.travelsdoc}>
            {
              this.state.travelslist.map(item => {
                return <li key={item.travelid} onClick={
                  ()=>{
                    this.props.history.push({pathname: '/topic', state:{topicid: item.topicid}})
                    sessionStorage.setItem('topicid', item.topicid)
                  }
                }>
                  <img src={item.img} alt=""/>
                  <p>{item.title}</p>
                  <p style={{color:'#666666', fontWeight: '500', marginBottom: '0.08rem'}}>{item.Ename}</p>  
                </li>
              })
            }
          </ul>
          {/* 其他推荐 */}
          <p style={{
            padding:'0.1rem 0 0.1rem 0.3rem',
            fontSize:'0.15erm',
            fontFamily:'PingFang SC',
            fontWeight:'bold',
            color:'rgba(51,51,51,1)'
          }}>其它推荐</p>
          {
            this.state.others.map(item=>{
              return <div style={{
                margin: '0 0.3rem',
                marginBottom: '0.28rem'
              }} key={item.travelid}>
                {/* 上边部分 */}
                <div style={{
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'space-between',
                  marginBottom: '0.09rem'
                }}>
                  <img style={{
                    width: '1.05rem',
                    height: '0.72rem ',
                    marginRight: '0.27rem'
                    }} src={item.img} alt=""/>
                  <div style={{
                    flex: 1
                  }}>
                    <p style={{
                      fontSize:'0.11rem',
                      fontFamily:'PingFang SC',
                      fontWeight:'bold',
                      color:'rgba(51,51,51,1)',
                      lineHeight:'0.13rem',
                      marginBottom: '0.05rem'
                    }}>{item.title}</p>
                    <p style={{
                      fontSize:'0.09rem',
                      fontFamily:'PingFang SC',
                      fontWeight:300,
                      color:'#666666',
                      lineHeight:'0.13rem'}}
                      >{item.desc}</p>
                  </div>
                </div> 
                {/* 下边部分 */}
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between'
                }}>
                  <p style={{
                    fontSize:'0.09rem',
                    fontFamily:'PingFang SC',
                    fontWeight:300,
                    color:'rgba(102,102,102,1)',
                    lineHeight: '0.21rem'
                  }}>
                    <img src={item.img} style={{
                      width: "0.16rem",
                      height: '0.16rem',
                      borderRadius: '50%'
                    }} alt=""/>
                    {item.username} | 发布于<span style={{
                      color: '#05C572',
                      fontSize: '0.07rem'
                    }}>{item.location}</span>
                  </p>
                  <p style={{
                    color: '#666666'
                  }}>
                    {
                      item.flaglove ? <img style={{
                        width: '0.19rem',
                        height: '0.19rem',
                        lineHeight: '0.19rem',
                        margin: '0 0.01rem'
                      }} src="/images/dianzan2.png" alt=""/> : <img style={{
                        width: '0.19rem',
                        lineHeight: '0.19rem',
                        margin: '0 0.01rem',
                        height: '0.19rem'
                      }} src="/images/点赞.png" alt=""/>
                    } { item.loves }
                    {
                      item.watchflag ? <img style={{
                        width: '0.19rem',
                        lineHeight: '0.19rem',
                        margin: '0 0.01rem',
                        height: '0.19rem'
                      }} src="/images/喜欢.png" alt=""/> : <img style={{
                        width: '0.19rem',
                        lineHeight: '0.19rem',
                        height: '0.19rem',
                        margin: '0 0.01rem'
                      }} src="/images/love.png" alt=""/>
                    } { item.watches }
                  </p>
                </div>
              </div>
            })
          }
          
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
